
<script>
export default {
  components: {

  },
  props: {
    plans: {
      type: Array,
      required: true,
      default: []
    },
    fetchPlansFn: {
      type: Function,
      default: null
    },
    value: {
      type: Object,
      required: true,
      default() {
        return {
          date: null,
          plan: null
        }
      }
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isFetching: false,
      form: this.cloneForm(this.value),

      formRules: {
        date: { type: 'object', required: true, message: '请选择日期作为特殊日期', trigger: 'blur' },
        plan: { type: 'number', required: true, message: '请选择一个班次', trigger: ['change', 'blur'] }
      }
    }
  },
  computed: {
    isSearchable() {
      return typeof this.fetchPlansFn === 'function'
    }
  },
  watch: {
    value(form) {
      this.form = this.cloneForm(form)
    }
  },
  created() {

  },
  methods: {
    cloneForm(form) {
      const { date, plan } = form
      const backup = {
        date: this.cloneDate(date),
        plan: plan
      }
      return backup
    },
    validate() {
      const validateFn = this.$refs?.form?.validate
      if (typeof validateFn !== 'function') return Promise.resolve(false)

      return new Promise((resolve) => {
        validateFn(flag => {
          resolve(flag)
        })
      })
    },
    resetForm() {
            // this.form = {
            //     date:null,
            //     plan:null
            // }
            this.$refs?.form?.resetFields?.()
    },
    cloneDate(date) {
      if (date === null || date === undefined) { return null }

      return new Date(date.getTime())
    },
    async fetch(keyword) {
      if (!this.isSearchable) return
      try {
        console.log('search')
        this.isFetching = true
        await this.fetchPlansFn(keyword)
        this.isFetching = false
      } catch (e) {
        this.isFetching = false
      }
    },
    update() {
      this.$emit(
        'input',
        this.cloneForm(this.form)
      )
    }
  }
}
</script>
<template>
  <el-form
    ref="form"
    label-width="80px"
    :model="form"
    :disabled="disabled"
    :rules="formRules"
  >
    <el-form-item label="特殊日期" prop="date">
      <el-date-picker
        v-model="form.date"
        type="date"
        placeholder="选择日期"
        style="width: 100%;"
        @change="update"
      />
    </el-form-item>

    <el-form-item label="班次" prop="plan">
      <el-select
        v-model="form.plan"
        placeholder="请选择"
        filterable
        style="width: 100%;"
        :loading="isFetching"
        :remote="isSearchable"
        :remote-method="fetch"
        @change="update"
        @remove-tag="update"
        @clear="update"
      >
        <el-option
          v-for="plan in plans"
          :key="plan.value"
          :label="plan.label"
          :value="plan.value"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>
<style lang="scss"></style>
